<template>
  <div>
    <el-card>
      <el-form :inline="true" label-width="80px">
        <el-form-item label="一级分类">
          <el-select
            placeholder="请选择"
            v-model="categoryStore.c1Id"
            @change="changeC1"
            :disabled="scene == 1"
          >
            <el-option
              v-for="(category1, _index) in categoryStore.c1Arr"
              :label="category1.name"
              :value="category1.id"
              :key="category1.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类">
          <el-select
            placeholder="请选择"
            v-model="categoryStore.c2Id"
            @change="changeC2"
            :disabled="scene == 1"
          >
            <el-option
              v-for="(category2, _index) in categoryStore.c2Arr"
              :label="category2.name"
              :value="category2.id"
              :key="category2.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="三级分类">
          <el-select
            placeholder="请选择"
            v-model="categoryStore.c3Id"
            :disabled="scene == 1"
          >
            <el-option
              v-for="(category3, _index) in categoryStore.c3Arr"
              :label="category3.name"
              :value="category3.id"
              :key="category3.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import useCategoryStore from '@/store/modules/category'
const categoryStore = useCategoryStore()

defineProps(['scene'])

onMounted(() => {
  categoryStore.getCategory1()
})
const changeC1 = (val: number) => {
  categoryStore.c2Id = ''
  categoryStore.c2Arr = []
  categoryStore.c3Id = ''
  categoryStore.c3Arr = []
  categoryStore.getCategory2(val)
}

const changeC2 = (val: number) => {
  categoryStore.c3Id = ''
  categoryStore.c3Arr = []
  categoryStore.getCategory3(val)
}
</script>

<style scoped></style>
